import React        from 'react';
import { Link }     from 'react-router-dom';
// util
import _mm                  from '../../../util/Mutil.js'
// service
import _product             from '../../../service/productService.js'
// 组件
import PageTitle            from '../../../common/pageTitle';
import TableList            from '../../../common/tableList';

class CategoryList extends React.Component{
  constructor(props){
      super(props);
      this.state = {
          list                : [],
          parentCategoryId    : this.props.match.params.categoryId || 0
      };
  }
  render(){
    let listBody = this.state.list.map((category, index) => {
      return (
        <tr key={index}>
          <td>{category.id}</td>
          <td>{category.name}</td>
          <td>
            <a className="opear"
              onClick={(e) => this.onUpdateName(category.id, category.name)}>修改名称</a>
            {
              category.parentId === 0
              ? <Link to={`/product-category/index/${category.id}`}>查看子品类</Link>
              : null
            }
          </td> 
        </tr>
      );
    });
    return (
      <div>
        <PageTitle title="品类列表">
          <div className="page-header-right">
            <Link to="/product-category/add" className="btn btn-primary">
              <i className="fa fa-plus"></i>
              <span>添加品类</span>
            </Link>
            &nbsp;&nbsp;
            <Link to="/product-category" className="btn btn-primary">
              <i className="fa fa-back"></i>
              <span>返回</span>
            </Link>
          </div>
        </PageTitle>
        <div className="row">
          <div className="col-md-12">
            <p>父品类ID: {this.state.parentCategoryId}</p>
          </div>
        </div>
        <TableList tableHeads={['品类ID', '品类名称', '操作']}>
          {listBody}
        </TableList>
      </div>
    );
  }
  componentDidMount(){
    this.loadCategoryList();
  }
  componentDidUpdate(prevProps, prevState){
    let oldPath = prevProps.location.pathname,
        newPath = this.props.location.pathname,
        newId   = this.props.match.params.categoryId || 0;
    if(oldPath !== newPath){
      this.setState({
        parentCategoryId : newId
      }, () => {
        this.loadCategoryList();
      });
    }
  }
  // 加载品类列表
  loadCategoryList(){
    _product.getCategoryList(this.state.parentCategoryId).then(res => {
      this.setState({
        list : res
      });
    }, errMsg => {
      this.setState({
        list : []
      });
      _mm.errorTips(errMsg);
    });
  }
  // 更新品类的名字
  onUpdateName(categoryId, categoryName){
    let newName = window.prompt('请输入新的品类名称', categoryName);
    if(newName){
      _product.updateCategoryName({
        categoryId: categoryId,
        categoryName : newName
      }).then(res => {
        _mm.successTips(res);
        this.loadCategoryList();
      }, errMsg => {
        _mm.errorTips(errMsg);
      });
    }
  }
}

export default CategoryList;